<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-resource-1.3.4.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
    <div id="app">

        
        <div class="panel panel-primary">
              <div class="panel-heading">
                    <h3 class="panel-title">添加品牌</h3>
              </div>
              <div class="panel-body ">
                    Panel content
              </div>
        </div>
        
        
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for='item in list' :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.ctime }}</td>
                    <td>
                        <a href="" @click='del(item.id)'>删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
        
    </div>
    <script>
        Vue.http.options.root='http://baidu.com/' // 相当于配置个server  底下使用的时候前面不带斜线
        Vue.http.options.emulateJSON = true;  // 全局配置json格式发送
        var vm = new Vue({
            el:'#app',
            data:{
                list:[
                    { id: 1, name: '五菱宏光',ctime: new Date() },
                    { id: 2, name: '保时捷',ctime: new Date() }
                ]
            },
            methods: {
                getAllList(){
                    this.$http.get('').then(result=>{
                        if(result.status == 0){
                            var result = result.body
                            this.list = result.message
                        }else{
                            alert('获取数据失败')
                        }
                    })
                },
                add(){ // 添加品牌列表到后台服务器
                // this.$http.post()接受三个参数
                // 1.url  2.要提交给服务器的数据{name:this.name}
                // 3.要以哪种数据类型提交 { emulateJSON:true },会以表单形式提交给后台=>application/x-www-form-urlencode
                    this.$http.post('url',{name:this.name},{emulateJSON:true}).then(result=>{
                        if(result.body.code == 0){
                        this.getAllList()

                        }
                    })
                },
                del(){
                    this.$http.get('url').then(res=>{
                        alert(2)
                    })
                }
            },
            created() {  // 当vm实例的data 和methods初始化完后实例vm会自动执行生命周期函数
                this.getAllList()
                this.name=''
            },
        })
    </script>
</body>
</html>